<template>
  <div class="mycollect-singer">
    <div style="line-height: 50px;
                font-weight: 700;
                color: #2a2727;
                padding-left: 25px">
      收藏的歌手({{total}})
    </div>
    <!-- 歌手-->
    <div class="singer_box">
      <div class="singer_info" v-for="(item, index) in artists" :key="index">
        <img v-lazy="item.picUrl" @click="goRoute(item)" alt="">
        <div>{{item.name}}</div>
      </div>
    </div>
    <!--分页-->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="18"
      :total="total"
      @current-change="handleCurrentChange">
    </el-pagination>

  </div>
</template>

<script>
  import {mycollect} from "@/network/mycollect";

  export default {
    name: "MyCollectSinger",
    data(){
      return{
        artists:[],  //歌手数据
        total:0,  //歌手总数
        currentPage:0,  //当前页
      }
    },
    created() {
      this.getSubSinger()
    },
    methods:{
      //切换分页的方法
      handleCurrentChange(newPage){
        this.currentPage = newPage - 1
        this.getSubSinger()
      },
      //点击歌手图片跳转到歌手详情页
      goRoute(item){
        this.$router.push('/singer/' + item.id)
      },


      getSubSinger(offset, limit = 18){
        mycollect.getSubSinger(offset, limit).then(res => {
          this.artists = res.data.data
          this.total = res.data.count
        })
      },
    },
  }
</script>

<style scoped>
/*歌手信息*/
.singer_box{
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  padding-bottom: 30px;
}
.singer_info{
  width: 150px;
  height: 180px;
  margin: 10px;
  text-align: center;
}
.singer_info div{
  font-size: 14px;
  line-height: 30px;
}
.singer_box img{
  width: 150px;
  height: 150px;
  border-radius: 5px;
  cursor: pointer;
}
/*分页按钮样式*/
/deep/ .el-pagination{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}
</style>
